<template>
<div>
  <el-row class="slide">
    <el-col :span="14">
      <div style="margin-left: 10px" class="boxshadow">
        <el-carousel height="240px">
          <el-carousel-item v-for="(item, index) in swiperList" :key="index">
            <img :src="item" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-col>
    <el-col :span="4">
      <div style="margin-left: 10px" class="boxshadow">
        <img height="240px" src="http://p0.meituan.net/codeman/e473bb428f070321269b23370ff02ba956209.jpg" alt="">
      </div>
    </el-col>
    <el-col :span="6">
      <div class="box-mm boxshadow" >
        <div class="img-wrapper">
          <img class="img" src="//s0.meituan.net/bs/fe-web-meituan/e350c4a/img/avatar.jpg" >
        </div>
        <h3 style="text-align: center">Hi,你好</h3>
        <el-button class="button" round style="width: 120px;height: 40px">注册</el-button>
        <el-button class="button" round style="width: 120px;height: 40px">立即登录</el-button>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="7">
      <div class="imgbox itembox boxshadow"></div>
    </el-col>
    <el-col :span="7">
      <div class="imgbox music boxshadow"></div>
    </el-col>
    <el-col :span="4">
      <div class="m-life-coop boxshadow"/>
    </el-col>
    <el-col :span="6">
      <div class="m-life-downapp boxshadow">
        <img
          src="//s1.meituan.net/bs/fe-web-meituan/60ac9a0/img/download-qr.png"
          alt="下载APP" class="imgs">
        <p class="pp">美团APP手机版</p>
        <h4 class="h4">
          <span class="red">1元起</span>
          <span class="gary">吃喝玩乐</span>
        </h4>
      </div>
    </el-col>
  </el-row>
</div>
</template>
<script>
export default {
  data () {
    return {
      swiperList : [
        'http://p0.meituan.net/codeman/daa73310c9e57454dc97f0146640fd9f69772.jpg',
        'http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg',
        'http://p0.meituan.net/codeman/a97baf515235f4c5a2b1323a741e577185048.jpg',
        'http://p0.meituan.net/codeman/33ff80dc00f832d697f3e20fc030799560495.jpg',
        'https://p1.meituan.net/travelcube/01d2ab1efac6e2b7adcfcdf57b8cb5481085686.png'
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.box-mm{
  height: 240px;
  margin-left: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-content: center;
  box-sizing: border-box;
  border: 1px solid #E5E5E5;
}
.img-wrapper{
  padding-top: 30px;
  height: 55px;
  text-align: center;
}
.img {
  width: 47px;
  height: 47px !important;
  border-radius: 50%;
  border: 4px solid #E5E5E5;
}
.button{
  margin: 0 auto;
  margin-top: 17px;
}
.imgbox{
  height: 165px;
}
.itembox{
  height: 165px;
  background: url(//p1.meituan.net/codeman/8cce56c467a17e04f3094d1e455462a0132772.png);
  background-size: 270px;
  background-position: 50%;
  background-repeat: no-repeat;
  margin-left: 10px;
}
.music{
  height: 165px;
  background: url(//p1.meituan.net/codeman/16442c19da1f1c4544f794e29d99c92051716.jpg);
  background-size: 270px;
  background-position: 50%;
  background-repeat: no-repeat;
  margin-left: 10px;
}
.m-life-coop {
  background: url(//p1.meituan.net/codeman/5b21cddb4bb1cbc3a9c3bce0f726c75940469.jpg);
  width: 150px;
  height: 165px;
  background-size: 150px;
  margin-left: 10px;
}
.m-life-downapp{
  display: flex;
  flex-direction: column;
  height: 165px;
  border: 1px solid #E5E5E5;
  margin-left: 10px;
  .imgs{
    height: 95px;
    width: 95px;
    margin: 0 auto;
  }
  .pp{
    text-align: center;
  }
  .h4{
    text-align: center;
    .red {
      color: red;
    }
  }
}
.boxshadow:hover{
  box-shadow: 1px 1px 10px #E5E2E2;
}
</style>
